import React from 'react'
import PropTypes from 'prop-types'
import config from 'config'
import {Avatar, Col, Form, Modal, Row, Table, Tag} from 'antd'
import styles from './style.less'

const getAvatarText = (record) => {
  const {nickname, wxId, wxNo} = record
  let dwxId = wxId
  if (wxNo)
    dwxId = wxNo

  if (nickname) {
    return nickname.substr(nickname.length - 1, nickname.length)
  } else {
    return dwxId ? dwxId.substr(0, 1).toUpperCase() : 'D'
  }
}

class modal extends React.Component {

  render () {
    const {
      loading,
      modalProps,
      detailList,
    } = this.props

    const listProps = {
      rowKey: 'id',
      dataSource: detailList,
      loading: loading.effects['duplicateFriend/duplicateFriendDetail'],
      pagination: false,
    }

    const columns = [
      {
        title: '运营号头像',
        dataIndex: 'avatar',
        key: 'avatar',
        render: (avatar, record, index) => avatar ? <Avatar src={avatar} size="large"/> :
          <Avatar style={{backgroundColor: config.randomColor(index), verticalAlign: 'middle'}}
                  size="large">{getAvatarText(record)}</Avatar>,
      }, {
        title: '归属员工',
        dataIndex: 'belongEmpName',
        key: 'belongEmpName',
      }, {
        title: '运营号昵称',
        dataIndex: 'operatorNickname',
        key: 'operatorNickname',
      }, {
        title: '微信 id',
        dataIndex: 'operatorWxNo',
        key: 'operatorWxNo',
        render: (val, r) => val ? val : r.operatorWxId,
      }, {
        title: '好友昵称',
        dataIndex: 'friendNickname',
        key: 'friendNickname',
      }, {
        title: '好友微信 id',
        dataIndex: 'dfriendWxNo',
        key: 'friendWxNo',
        render: (val, r) => val ? val : r.dfriendWxId,
      }, {
        title: '添加好友时间',
        dataIndex: 'becomeFriendTime',
        key: 'becomeFriendTime',
      }, {
        title: '是否有订单',
        dataIndex: 'orderCount',
        key: 'hasOrder',
        render: (val) => val > 0 ? '有' : '无',
      }, {
        title: '首单时间',
        dataIndex: 'firstOrderTime',
        key: 'firstOrderTime',
        render: val => val ? val : '-'
      }, {
        title: '成交状态',
        dataIndex: 'dealStatus',
        key: 'dealStatus',
        render: (val) => {
          if (val === 0) {
            return <Tag color={'green'}>首单成交</Tag>
          } else if (val === 1) {
            return <Tag color={'yellow'}>后续成交</Tag>
          } else {
            return <Tag>未成交</Tag>
          }
        }
      },
    ]

    return (
      <Modal {...modalProps}>
        <Row gutter={24}>
          <Col span={24}>
            <Table
              {...listProps}
              scroll={{x: 960}}
              columns={columns}
              simple
              rowKey={record => record.id}
              rowClassName={record => (record.editable ? styles.editable : '')}
            />
          </Col>
        </Row>
      </Modal>
    )
  }
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
